<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <title>canvas</title>
    <style>
        body{
            padding:0;
            margin:0;
        }
        canvas{
            background:#eee;
            padding:0;
        }
        div{
            color: #000;
            background: #ddd;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <textarea name="textarea" id="txt" cols="30" rows="10"></textarea>
    <script src='../js/ball.js'></script>
    <script src="../js/arrow.js"></script>
    <script src='../js/utils.js'></script>
    <script>
        window.onload = function(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            log = document.getElementById('txt');

            canvas.width = document.body.clientWidth;
            canvas.height = window.screen.availHeight*0.8;
            
             //传入canvas,获取鼠标坐标
           var mouse = utils.capture(canvas);

           
           var ball = new Ball(20,"red");
               ball.x = canvas.width/2;
               ball.y = canvas.height/2;
               ball.draw(context);
            
           //定义状态函数
           function state(wrd){
               /*注意这里用到了我们前面新加的代码
                 ball.getBounds(): 返回一个对象包含球的坐标，宽高.并作为参数传入
                 utils.containsPoint(): 判断点击区域，返回布尔值
               */
               if(utils.containsPoint(ball.getBounds(), mouse.x, mouse.y)){
                   log.value = "in ball : "+ wrd;
               }else{
                   log.value = "canvas : " + wrd;
               }
           }
           // 为canvas添加mousedown事件
           

          /* if(window.utils.ontouchtof){
              canvas.addEventListener('touchend', function(event){
               state("touchend");
               //mouseup
               canvas.addEventListener('touchstart', function(event){
                    state("touchstart");
               },false);
               //mousemove
               canvas.addEventListener('touchmove', function(event){
                    state("touchmove");
               }, false);
           }, false);
           }else{

           }

           canvas.addEventListener('mousedown', function(event){
            state("mousedown");
           //mouseup
           canvas.addEventListener('mouseup', function(event){
                state("mouseup");
           },false);
           //mousemove
           canvas.addEventListener('mousemove', function(event){
                    state("mousemove");
               }, false);
           }, false);*/



           var w = 0, h = 0;

           var cdow,cup,cmove;
           if(window.utils.ontouchtof){
                cdow = "touchend";
                cup = "touchstart";
                cmove = "touchmove";
           }else{
                cdow ="mousedown" ;
                cup = "mouseup";
                cmove = "mousemove";
           }
           
           //为canvas设置监听事件
           canvas.addEventListener(cdow, function(event){
               //判断是否点击在球体上
               //console.log(event.changedTouches[0])
               console.log(ball.getBounds(), mouse.x, mouse.y);
               if(utils.containsPoint(ball.getBounds(), mouse.x, mouse.y)){
                  
                   w = mouse.x - ball.x;
                   h = mouse.y - ball.y;
                   canvas.addEventListener(cup, onMouseUp, false);
                   canvas.addEventListener(cmove, onMouseMove, false);
               }
           }, false);
           
           //mouseup事件执行函数
           function onMouseUp(event){
               canvas.removeEventListener(cup, onMouseUp, false);
               canvas.removeEventListener(cmove, onMouseMove, false);
           }
           //mousemove事件执行函数
           function onMouseMove(event){
                  ball.x = mouse.x - w;
                  ball.y = mouse.y - h;
           }

           //动画循环
           (function dramFrame(){
               window.requestAnimationFrame(dramFrame, canvas);
               context.clearRect(0, 0, canvas.width, canvas.height);
               
               ball.draw(context);
           }())

        }
    </script>
</body>
</html>
